<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>打卡内容管理</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/font-awesome.css"/>
		<style>
			
			#middlePopover {
				margin-top: 26%;
				width: 98%;
			}
			#middlePopover .mui-popover {
			}
		</style>
		<script>
			var text = null;
			function startRecognize() {
				console.log("clicked!");
			    if(plus.os.name=='Android'&&navigator.userAgent.indexOf('StreamApp')>0){
			        plus.nativeUI.toast('当前环境暂不支持语音识别插件');
			        return;
			    }
			    var options = {};
			    options.engine = 'iFly';
			    text.value = "";
			    //outSet( "开始语音识别：" );
			    plus.speech.startRecognize( options, function ( s ) {
			        //outLine( s );
			        console.log(s)
			        text.value += clearString(s.toString());
			    }, function ( e ) {
			    	console.log(e)
			        //outSet( "语音识别失败："+e.message );
			    } );
			}
			
			function clearString(s){
				var rs = ""; 
			    var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）&;|{}【】‘；：”“'。，、？]") 
			    for (var i = 0; i < s.length; i++) { 
			        rs = rs+s.substr(i, 1).replace(pattern, ''); 
			    } 
			    return rs;  
			}
		</script>
	</head>

	<body onload="text=document.getElementById('textarea');">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">打卡内容管理</h1>
			<a class=" mui-icon mui-pull-right mui-icon-plus" href="#middlePopover" id="addbtn"></a>
		</header>
		<div class="mui-content">
			<h5 class="mui-content-padded" style="margin: 15px 10px;text-align: right;">提示：左滑拖拽进行删除</h5>
			<ul id="combo_list" class="mui-table-view">
			</ul>
		</div>
		<div id="middlePopover" class="mui-popover">
			<div class="mui-content">
				<div class="mui-content-padded" style="margin: 5px;">
					<div class="mui-input-row" style="margin: 10px 5px;">
							<textarea id="textarea" rows="5" placeholder="输入打卡内容，可语音识别文字"></textarea>
					</div>
					<div class="mui-button-row">
						<a class=" mui-icon fa fa-microphone" onclick="startRecognize()" style="font-size: xx-large;"></a>
				    </div>
				    <div class="mui-button-row">
				        <a class="mui-tab-item">
				            <span class="mui-tab-label" onclick="startRecognize();">开始语音输入</span>
				        </a>
				   </div>
				   <p></p>
					<div class="mui-button-row">
							<button type="button" class="mui-btn mui-btn-primary" onclick="newaddEvent();">保存</button>&nbsp;&nbsp;
							<!--<button type="button" class="mui-btn mui-btn-danger" onclick="hiddenPop()">取消</button>-->
					</div>
					<p></p>
				</div>
			</div>
				
		</div>
		<div class="mui-hidden" id="hidden_div">
			
		</div>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/main.js" ></script>
		<script src="../js/main.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/md5.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			mui.init({
				swipeBack:true //启用右滑关闭功能
			});
			mui.plusReady(function() {
				initLoad();
				
				
			});
			
			(function($) {
				var btnArray = ['确认', '取消'];
				$('#combo_list').on('slideleft', '.mui-table-view-cell', function(event) {
					var elem = this;
					mui.confirm('确认删除该条记录？', '提醒', btnArray, function(e) {
						if (e.index == 0) {
							var ctitle = elem.querySelector(".mui-table-cell").innerHTML
							removeCombo(md5(ctitle));
							elem.parentNode.removeChild(elem);
							mui.toast("删除成功")
						} else {
							setTimeout(function() {
								$.swipeoutClose(elem);
							}, 0);
						}
					});
				});
			})(mui);
			var mycallback = {
				initload: function(){
					initLoad();
					mui('.mui-popover').popover('hide');
				},
				alert: function(ctitle){
					mui.toast('已存在：'+ctitle);
				},
				success: function(){
					
				}
				
			}
			
			function newaddEvent(){
				var text = document.getElementById("textarea");
				if(!text.value||text.value==""){
							mui.toast("不允许为空");
							return false;
				}
				var eventVal = text.value;
				eventVal = clearString(eventVal);
				var cname = md5(eventVal);
				addSignFun(cname,eventVal,mycallback);
				
				initLoad();
			}
			
			function initLoad(){
				//查询数据
				var db = getDatabase();
				db.transaction(function(tx){
			    	tx.executeSql('SELECT * FROM combo', [], function (tx, results) {
				    var len = results.rows.length;
				    var htmls = ""
				    for (i = 0; i < len; i++){
				       htmls += '<li class="mui-table-view-cell">'+
			       						'<div class="mui-slider-right mui-disabled">'+
			       						'<a class="mui-btn mui-btn-red">删除</a>'+
			       						'</div>'+
			       						'<div class="mui-slider-handle mui-table">'+
			       						'<div class="mui-table-cell">'+
			       							results.rows.item(i).ctitle+
			       						'</div></div></li>'
				}
			       document.getElementById("combo_list").innerHTML = htmls;
				});
			
			    })
			}
			
		</script>
	</body>

</html>